<template>
  <div class="channel-edit-container">
    <!-- 我的频道标题 -->
    <van-cell title="我的频道">
      <template #default>
        <van-button
          plain
          round
          type="danger"
          size="mini"
          class="edit-btn"
          @click="isEdit = !isEdit"
        >{{ isEdit ? '完成' : '编辑' }}
        </van-button>
      </template>
    </van-cell>

    <!-- 我的频道宫格 -->
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="channel-item"
        :class="{ active_red: active === index }"
        v-for="(channel, index) in myChannels"
        :key="channel.id"
        :icon="(isEdit && index !== 0) ? 'close' : ''"
        :text="channel.name"
        @click="onChannelClick(index, channel.id)"
      />
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell title="频道推荐"></van-cell>

    <!-- 频道推荐宫格 -->
    <van-grid :gutter="8" class="recommend-grid">
      <van-grid-item
        class="channel-item"
        v-for="value in newRecommendChannels"
        :key="value.id"
        icon="plus"
        :text="value.name"
        @click="onAddChannel(value)"
      />
    </van-grid>
  </div>
</template>

<script>
import { setItem } from '@/utils/storage'
import { differenceBy } from 'lodash'
// import {addUserChannelAPI, deleteUserChannelAPI} from '@/api'

export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      default: () => []
    },

    active: { // 当前高亮频道
      type: Number,
      default: 0
    },

    allChannels: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      myChannelsClone: this.myChannels,
      isEdit: false // 控制当前频道的编辑状态，默认为关闭
    }
  },

  computed: {
    // 计算得出推荐频道的列表数组
    recommendChannels () {
      // 1. 从allChannels中通过过滤器进行筛选
      return this.allChannels.filter(channel => {
        return !this.myChannels.find(mychannel => mychannel.id === channel.id)
      })
    },

    newRecommendChannels () {
      // differenceBy(目标数组, 差异数组, 比较条件)
      return differenceBy(this.allChannels, this.myChannels, 'id')
    }
  },

  methods: {
    // 添加我的频道
    async onAddChannel (channel) {
      this.myChannelsClone.push(channel)
      // 数据持久化处理
      setItem('BS_MYCHANNELS', this.myChannels)
      this.$toast.success('添加成功')
      // if (this.$store.state.user) {
      //   // 已登录状态
      //   try {
      //     await addUserChannelAPI({
      //       channels: [{
      //         id: channel.id,
      //         seq: this.myChannels.length
      //       }]
      //     })
      //
      //     this.$toast.success('添加成功')
      //   } catch (error) {
      //     console.log(error)
      //     this.$toast.fail('添加失败')
      //   }
      // } else {
      //   // 未登录状态 =》 把数据存到本地
      //   setItem('BS_MYCHANNELS', this.myChannels)
      // }
    },

    // 点击我的频道触发的方法
    async onChannelClick (index, channelId) {
      if (this.isEdit) {
        // 编辑状态，删除频道
        if (index !== 0) {
          this.myChannelsClone.splice(index, 1)

          // 如果删除的元素索引小于等于当前高亮的索引，需要让active 减1
          if (index <= this.active) {
            this.$emit('update-active', this.active - 1, true)
          }
        }
        setItem('BS_MYCHANNELS', this.myChannels)
        this.$toast.success('删除成功')
        // 删除频道数据持久化
        // 数据持久化处理
        // if (this.$store.state.user) {
        //
        // }
        //   // 已登录状态
        //   try {
        //     await deleteUserChannelAPI(channelId)
        //     this.$toast.success('删除成功')
        //   } catch (error) {
        //     console.log(error)
        //     this.$toast.fail('删除失败')
        //   }
        // } else {
        //   // 未登录状态 =》 把数据存到本地
        //   setItem('BS_MYCHANNELS', this.myChannels)
        // }
      } else {
        // 非编辑状态，切换频道并关闭弹框
        this.$emit('update-active', index)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit-container {
  .edit-btn {
    padding: 0 12px;
  }

  .my-grid {
    :deep(.active_red) {
      .van-grid-item__text {
        color: red !important;
      }
    }

    :deep(.channel-item) {
      .van-grid-item__content {
        background-color: #f5f5f6;
      }

      .van-grid-item__text {
        font-size: 12px;
        color: #222222;
        margin-top: 0;
      }

      .van-icon-close {
        position: absolute;
        font-size: 16px;
        top: -7px;
        right: -7px;
        color: #d9d6d9;
      }
    }
  }

  .recommend-grid {
    :deep(.channel-item) {
      .van-grid-item__content {
        white-space: nowrap;
        flex-direction: row;
        background-color: #f5f5f6;
        padding: 16px 4px;
      }

      .van-grid-item__text {
        font-size: 12px;
        color: #222222;
        margin-top: 0;
      }

      .van-icon-plus {
        font-size: 12px;
        margin-right: 2px;
      }
    }
  }
}
</style>
